界面布局 - float/position

float

float 的作用

float 属性设置为 left 或者 right ，会把这个元素从原来的布局中 单独拿出来，放到 container 元素的最左边、或者最右边。

看一个例子：

<head>
  <style>
  .box {
    width: 150px;
    height: 70px;
    border: 2px solid red;
    padding: 3em;
  }

  pre {
    background-color: rgb(79,185,227);
    padding: 1em;
    color: white;
  }
  </style>
</head>

<body>
  <h1>float示例</h1>

  <div class="box">Float</div>

  <pre>    
  我们 不是 上大班课的学习方式

  我们 是 实战练习 + 1对1 指导答疑

  学习练习过程中有任何问题， 随时找老师解答指导

  打字语音说不清的，可以 连线讲解
  </pre>

  <pre>
  我们的学员有的是 辞职专门学习、有的是边工作边学习
  
  并且各人的基础不同，所以学习重点、进度都不同。

  这些情况，我们都可以灵活的教学，因为我们教学是 1对1 的
  </pre>
   
</body>

如果我们给 .box css选择加上如下属性

{
  float: left;
  margin-right: 1em;
}

结果如下

就会发现原来 .box 这个div元素下面的内容，尽可能的跑到它的右边去了。

float 属性设置为 left ，就会把这个元素从原来的布局中单独拿出来，放到 container 元素的最左边。

如果要清除float 后面元素移到侧边的效果，可以设置 clear 属性的值

比如，我们可设置.box 后面的pre，添加css 属性值 clear:left ，表示清除该元素 float left 的效果

如下所示

我们还可以试试 float 到右边，效果相同，只是方向是反的，如下

{
  float: right;
  margin-left: 1em;
}

多个元素float

如果多个相邻的兄弟元素都是float 同一个方向，就依次放置，如下

<head>
  <style> 
  .box {
    width: 150px;
    height: 70px;
    border: 1px solid red;
    padding: 3em;
    float: left;
    margin-right: 1em;
  }

  pre {
    background-color: rgb(79,185,227);
    padding: 1em;
    color: white;
  }
  </style>
</head>

<body>
  <h1>float示例</h1>

  <div class="box">Float</div>
  <div class="box">Float2</div>


  <pre>    
  我们 不是 上大班课的学习方式

  我们 是 实战练习 + 1对1 指导答疑

  学习练习过程中有任何问题， 随时找老师解答指导

  打字语音说不清的，可以 连线讲解
  </pre>


  <pre>
  我们的学员有的是 辞职专门学习、有的是边工作边学习
  
  并且各人的基础不同，所以学习重点、进度都不同。

  这些情况，我们都可以灵活的教学，因为我们教学是 1对1 的
  </pre>
   
</body>

float: right 正好反向，如下

{
  float: right;
  margin-left: 1em;
}

position

相对定位 relative

css 属性 position 设置为 relative ，表示 相对原来位置的定位 ，是CCS常用的一种设置。

看下面这段HTML

<head>
  <style>    
  pre{
    background-color: rgb(79,185,227);
    padding: 1em;
    color: white;
    width: 80%
  }
  </style>
</head>

<body>

  <h1>position示例</h1>

  <pre>    
  我们 不是 上大班课的学习方式

  我们 是 实战练习 + 1对1 指导答疑

  学习练习过程中有任何问题， 随时找老师解答指导

  打字语音说不清的，可以 连线讲解
  </pre>

  <pre>
  我们的学员有的是 辞职专门学习、有的是边工作边学习
  
  并且各人的基础不同，所以学习重点、进度都不同。

  这些情况，我们都可以灵活的教学，因为我们教学是 1对1 的
  </pre>

</body>

如果我们把第2个 pre 加上 style='position: relative;top: 10px; left: 20px;'

效果如下：

就可以发现它 相对于原来的位置 下移了10px，右移动了 20px

top 指定原来位置相对于现在的上方距离，也就是现在位置相对于原来位置下移多少

left 指定原来位置相对于现在的左边地方，也就是现在位置相对于原来位置右移多少

同理，指定 style='position: relative; bottom: 10px; right: 20px;' 效果如下

relative 定位是要和 top 、 left 、 bottom 、 right 这些属性结合起来才能产生相对效果的。

当然有时候 relative 定位并不需要设置位移，目的是为了给 Absolute定位的子元素提供相对位置。后面会讲。

绝对定位 absolute

position 属性值为 absolute ，表示绝对定位

下面这段html，第2个 p元素加上了绝对定位：

background-color:green;position: absolute; top: 20px; left: 30px

<head>
  <style>
  body {
    width: 90%;
    margin: 0 auto;
  }

  p {
    background-color: rgb(79,185,227);
    padding: 1em;
    color: white;
    white-space: pre-wrap;
  }
  </style>
</head>

<body>

<h1>position示例</h1>

<p>111111111111

  1111111111111111111111111111111111111111111111
</p>

<p style='background-color:green;position: absolute; top: 20px; left: 30px'>
  22222222222222222222222222222222222

  222222222222222222222222

  2222222222222222222222222222
</p>

<p>333333333333333333333333333333333333333333333333333333

  333333333333333333333333333333
</p>

</body>

可以发现显示效果是：这个绝对定位元素 被从原来的 html布局中取出来 ，放置在一个独立的显示图层上。

绝对定位的元素所在的图层 优先级高于 原来的图层，所以遮挡了原来的内容。

而原来的布局中按照去除这个绝对定位元素后的正常布局。

我们知道，元素的位置大小是由其 包含块 的位置大小决定的。

绝对定位元素 的 包含块 位置是这样确定的：

从里到外，一层层往上找它的 上级元素
看这些上级元素 position 的值，如果不是 static ，而是为这些值之一： fixed, absolute, relative, sticky

那么这个 最先找到的 上级元素的 padding区 就是包含块的区域和位置
如果没有找到这样的上级元素，那么它的包含块就是 初始包含块（initial containing block） ，范围是整个浏览器 内容窗口区（viewport）

本例中，该绝对定位元素就是整个浏览器窗口区作为 包含块 位置

加上 top: 20px; left: 30px; 这样的指定，指明相对位置，就可以发现它相对于整个窗口区，左上角下移20px 右移30px

top 指定本元素 上边 相对于包含块 上边 下移 多少

left 指定本元素 左边 相对于包含块 左边 右移 多少

bottom 指定本元素 下边 相对于包含块 下边 上移 多少

right 指定本元素 右边 相对于包含块 右边 左移 多少

下面的例子嵌套2层绝对定位元素

<head>
  <style>
  body {
    width: 90%;
    margin: 0 auto;
  }

  p {
    background-color: rgb(79,185,227);
    padding: 1em;
    color: white;
    white-space: pre-wrap;
  }
  </style>
</head>

<body>

<h1>position示例</h1>


<p>111111111

  111111111111111
</p>

<div style='position: absolute; 
            width:70%; height:70%;
            border:2px solid red;'>
  注意事项
  
  <br>
  - 事项1  
  <br>
  - 事项2
  <br>
  - 事项3
  
  <p style='background-color:green;position: absolute;top: 20px; left: 30px;'>
    2222222222


    2222222222
  </p>
</div>

<p>3333333333333333

  33333333333
</p>

</body>

可以发现绝对定位的p相对的包含块，也就是上层的绝对定位的div元素

而且内部绝对定位的元素显示，会遮挡上层绝对定位的元素

z-index

如果一个html中有多个 绝对定位 的元素，html出现位置后面元素的图层优先级会高于前面的元素。

比如，上例中的绝对定位的 p元素就高于上层的上层的绝对定位的div元素

再看下面的例子

<head>
  <style>
  body {
    width: 90%;
    margin: 0 auto;
  }

  div {
    padding: 1em;
    color: white;
    white-space: pre-wrap;
  }
  </style>
</head>

<body>

<div style='position: absolute; 
            background-color: green;
            width:70%; height:30%;'>
   注意事项1111
  
</div>


<div style='position: absolute; 
            background-color: steelblue;
            width:70%; height:30%;'>
   注意事项2222
</div>


</body>

可以发现只显示了后面的绝对定位的div，因为优先级高遮挡了前面的

可以通过 z-index 属性改变图层优先级。

z 代表的是 z 轴的意思。就是3维的垂直于屏幕平面（指向你的脸）的轴。

图层 z-index 属性值越大，优先级越高，会遮挡优先级低的图层

绝对定位元素所在图层 z-index 缺省值 auto ，相当于 0

上例中，给第一个div 增加 z-index:1 的style属性，就能高过第2个div的默认为0的优先级了。

固定定位 fixed

固定定位 的 position 值为 fixed

和绝对定位一样，固定定位的元素也是 被从原来的 html布局中取出来 ，放置在一个独立的显示图层上。

绝对定位的元素所在的图层 优先级高于 原来的图层，所以遮挡了原来的内容。

而原来的布局中按照去除这个绝对定位元素后的正常布局。

但是：固定定位都是相对于整个 viewport 的，和上级包含块元素无关，这点和绝对定位不同

这点和绝对定位不同。

比如

<head>
  <style>
  body {
    width: 90%;
    margin: 0 auto;
  }

  p {
    background-color: rgb(79,185,227);
    padding: 1em;
    color: white;
    white-space: pre-wrap;
  }
  </style>
</head>

<body>

<h1>position示例</h1>

<p>111111111

  111111111111111
</p>
  
<p style='background-color:green;margin:0;
      position: fixed;top: 20px; left: 30px;'>
    固定定位


  2222222222
</p> 

<p>3333333333333333

  33333333333
</p>

</body>

可以发现，第2个p 固定定位，偏移是相对于viewport 的。

top 指定本元素 上边 相对于 viewport 上边 下移 多少

left 指定本元素 左边 相对于 viewport 左边 右移 多少

bottom 指定本元素 下边 相对于 viewport 下边 上移 多少

right 指定本元素 右边 相对于 viewport 右边 左移 多少

再看一下这个嵌套的例子

<head>
  <style>
  body {
    width: 90%;
    margin: 0 auto;
  }

  p {
    background-color: rgb(79,185,227);
    padding: 1em;
    color: white;
    white-space: pre-wrap;
  }
  </style>
</head>

<body>

<h1>position示例</h1>

<p>111111111

  111111111111111
</p>

<div style='position: fixed; top: 200px; left: 200px;
            width:70%; height:50%;
            border:2px solid red;'>
  注意事项
  <p style='background-color:green;margin:0;
    position: fixed; top: 20px; left: 30px;'>
    固定定位

    2222222222
  </p>
</div>

<p>3333333333333333

  33333333333
</p>

</body>

可以发现，第2个p元素固定定位，偏移还是相对于viewport 的，和它的上级元素无关